import React from "react";
import { Form,InputNumber,Input,Table, Tag, Space ,Button,Popconfirm,Alert} from 'antd';
import 'antd/dist/antd.css';
import axios from "axios";
import {EditOutlined} from '@ant-design/icons';
import "./index.css"
const { Search } = Input;


const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};



export default class User extends React.Component {
    state = {
      isShow:false, 
      isShow1:false,
      data1:{},
      columns:[
        {
          title: '用户编号',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '用户姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '用户年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '邮箱地址',
          dataIndex: 'email',
          key: 'email',
        },
        {
          title: '注册地址',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '地区',
          dataIndex: 'area',
          key: 'area',
        },
        {
          title: '网络',
          dataIndex: 'network',
          key: 'network',
        },
        {
          title: '注册时间',
          dataIndex: 'regtime',
          key: 'regtime',
        },
        {
          title: '登录时间',
          dataIndex: 'logintime',
          key: 'logintime',
        },
        {
          title: '操作',
          key: 'action',
          render: (text,record,index) => (
            <Space size="middle">
              <Button type="primary" onClick={()=>this.change(record,index)}>修改</Button>
              <Popconfirm placement="topRight" title="您真的要删除吗" onConfirm={()=>{this.delete(record.id,index)}} okText="Yes" cancelText="No">
                <Button>删除</Button>
              </Popconfirm>
              
            </Space>
          ),
        }
      ],
      data:[]
    }
    change(record,index){
      // console.log("record",record);
      let arr={...record}
      let show = this.state.isShow1;
      this.setState({
        isShow1 : !show,
        data1:arr
      })
      
      // console.log(this.form.getFileValue("name"))
      // console.log("index",index);
      // this.props.form.setFieldsValue();
      // this.setState({
      //   isShow : record
      // })
      // let id = record.id;
      // 
      // console.log(show);
    }
    changevalue(ev){
      console.log(this.state.data1)
      var id = this.state.data1.id;
    let arr = {...this.state.data1}
    console.log(arr)
      console.log(ev.target.value)
      this.setState({
				 data1:{
           ...arr,
           [ev.target.name]:ev.target.value
         }
			})
    }
    
    delete(id,index){
      // console.log("id",id)
      // console.log("index",index)
      axios({
        url:"http://10.35.166.207:8088/deleteUsers",
        params:{id}
      }).then(res=>{
        // console.log("res.data删除",res.data)
        let obj = res.data;
        if(obj =="success"){
          let arr = this.state.data
          arr.splice(index,1)
          console.log("arr",arr)
          this.setState({
            data:[...arr]
          }) 
        }
        else{
          <Alert message="Error" type="error" showIcon />
        }
      })
    }
    onFinish =(values)=> {
            // console.log("this.state.data",this.state.data)
      axios({
        url:"http://10.35.166.207:8088/addUsers",
        params:{values}
      }).then(res=>{
        // console.log("res.data插入",res.data)
        let obj = res.data;
          if(obj ==="success"){
            axios({
              url:"http://10.35.166.207:8088/getUsers"
          }).then(res=>{
            // console.log("res.data",res.data)
              let arr = res.data;
              // console.log("arr",arr)
              arr.forEach((item,index)=>{
                  item.key=index+1;
              });
              // console.log(arr)
              this.setState({
                data:arr
              })
          })
          }
      })
    }
    componentDidMount(){
        axios({
            url:"http://10.35.166.207:8088/getUsers"
            // url:"http://localhost/day22/getUsers.php"
        }).then(res=>{
          // console.log("res.data",res.data)
            let arr = res.data;
            // let arr = JSON.parse(res.data);
            // console.log("arr",arr)
            arr.forEach((item,index)=>{
                item.key=index+1;
            });
            // console.log(arr)
            this.setState({
              data:arr
            })
        })
    }
    add(){
      let show = this.state.isShow;
      // console.log(show);
        this.setState({
          isShow : !show
        })
    }
    cancel(){
      let show = this.state.isShow;
        this.setState({
          isShow : !show
        })
    }
    cancel1(){
      let show1 = this.state.isShow1;
        this.setState({
          isShow1 : !show1
        })
    }
    confirm1(){
      var id = this.state.data1.id;
      var name = this.state.data1.name;
      var age = this.state.data1.age;
      var email = this.state.data1.email;
      var address = this.state.data1.address;
      var area = this.state.data1.area;
      var network = this.state.data1.network;
      var regtime = this.state.data1.regtime;
      var logintime = this.state.data1.logintime;
      axios({
          url:"http://10.35.166.207:8088/changeUsers",
          params:{id,name,age,email,address,area,network,regtime,logintime}
        }).then(res=>{
          let obj = res.data;
          if(obj){
            axios({
              url:"http://10.35.166.207:8088/getUsers"
          }).then(res=>{
            // console.log("res.data",res.data)
              let arr = res.data;
              // console.log("arr",arr)
              arr.forEach((item,index)=>{
                  item.key=index+1;
              });
              // console.log(arr)
              this.setState({
                data:arr
              })
            })
          }
          else{
            alert("修改失败")
          }
        })
    }
    search(value,event){
      axios({
        url:"http://10.35.166.207:8088/getUsers",
        params:{value}
      }).then(res=>{
        // console.log(res.data)
        let arr = res.data;
            // console.log("arr",arr)
            arr.forEach((item,index)=>{
                item.key=index+1;
            });
            // console.log(arr)
            this.setState({
              data:arr
            })
      })
    }
    
    render = () => {
      return(
      <div>
          <Button type="primary" icon={<EditOutlined />} onClick={()=>this.add()}>添加</Button>
          <Search placeholder="搜索" onSearch={(value,event)=>{this.search(value,event)}} enterButton />
          <Table columns={this.state.columns} dataSource={this.state.data} />
         
          <div id="mask" className={this.state.isShow?'show':'hide'}>
          </div>
          <div id="pop" className={this.state.isShow?'show':'hide'}> 
            <Form {...layout} name="nest-messages" onFinish={this.onFinish} validateMessages={validateMessages}  className="widt" >
              <Form.Item name={['id']} label="用户编号"
            rules={[
              {
                required: true,
                pattern:/^\d{6}$/
              },
            ]}
          >
          <Input  />
          </Form.Item>

          <Form.Item
            name={['name']}
            label="用户姓名"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input  />
          </Form.Item>
          <Form.Item
            name={['age']}
            label="用户年龄"
            rules={[
              {
                type: 'number',
                min: 0,
                max: 99,
              },
            ]}
          >
            <InputNumber style={{ width: '100%' }}  />
          </Form.Item>
          
          <Form.Item
            name={['email']}
            label="邮箱地址"
            rules={[
              {
                type: 'email',
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name={['address']}
            label="注册地址"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input type="text"  />
          </Form.Item>
          <Form.Item
            name={['area']}
            label="地区"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={['network']}
            label="网络"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input  />
          </Form.Item>
          <Form.Item
            name={['regtime']}
            label="注册时间"
            rules={[
              {
                required: true,
                pattern:/(^\d{4}(\-|\/|\.)([1-9]|[0][1-9]|[1][0-2])\2([1-9]|[0][1-9]|[1][0-9]|[2][0-9]|[3][0-1]))$/
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name={['logintime']}
            label="登录时间"
            rules={[
              {
                required: true,
                pattern:/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9]))$/
              },
            ]}
          >
            <Input />
            
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button id="cancel" onClick={()=>{this.cancel()}} >
              取消
            </Button>
            <Button type="primary" htmlType="submit" id="submit" onClick={()=>{this.cancel()}}>
              提交
            </Button>
          </Form.Item>
        </Form>
      
        </div>
        <div id="changemask" className={this.state.isShow1?'show1':'hide1'}></div>
        <div id="changepop" className={this.state.isShow1?'show1':'hide1'}>
          <span className="word">用户编号 </span><Input style={{ color: 'rgba(0,0,0,.7)' }} name="id" value={this.state.data1.id} onChange={(ev)=>this.changevalue(ev)} maxLength={6}/>
          <span className="word">用户姓名 </span><Input style={{ color: 'rgba(0,0,0,.7)' }} name="name" value={this.state.data1.name} onChange={(ev)=>this.changevalue(ev)}maxLength={20}/>
          <span className="word">邮箱地址 </span><Input style={{ color: 'rgba(0,0,0,.7)' }} value={this.state.data1.email} name="email"onChange={(ev)=>this.changevalue(ev)}minLength={5} maxLength={16}/>
          <span className="word">注册地址 </span><Input style={{ color: 'rgba(0,0,0,.7)' }} value={this.state.data1.address} onChange={(ev)=>this.changevalue(ev)} name="address" minLength={5} maxLength={16}/>
          <span className="word">地区 </span><Input style={{ color: 'rgba(0,0,0,.7)' }} value={this.state.data1.area} onChange={(ev)=>this.changevalue(ev)} name="area" minLength={5} maxLength={16}/>
          <span className="word">网络</span> <Input style={{ color: 'rgba(0,0,0,.7)' }} value={this.state.data1.network} onChange={(ev)=>this.changevalue(ev)} name="network" minLength={2} maxLength={3}/>
          
          <span className="word">注册时间</span><Input.Group  style={{ color: 'rgba(0,0,0,.7)'} }>
            <Input style={{ width: '100%' }} value={this.state.data1.regtime} onChange={(ev)=>this.changevalue(ev)} name="regtime" minLength={10}/>
          </Input.Group>
          <span className="word">登录时间</span><Input.Group compact style={{ color: 'rgba(0,0,0,.7)' }}>
            <Input style={{ width: '100%' }} value={this.state.data1.logintime} onChange={(ev)=>this.changevalue(ev)} name="logintime" minLength={10}/>
          </Input.Group>
        <Button id="cancel" type="dash" onClick={()=>{this.cancel1()}}>取消</Button>
        <Button id="confirm" type="primary" onClick={(ev)=>{this.confirm1(ev);this.cancel1()}}>确认</Button>
      </div>
      
    </div>
      
    )
}
}